<template>
    <div id="SocialVistior">
        <el-row>
            <el-col :sx="12" :sm="12" :md="12" :lg="12" style="margin-bottom:30px">
                <el-button type="primary" @click="pushToAddNewVisitor">新增上门</el-button>
                <el-button type="primary" @click="downLoadTemplate">下载模板</el-button>
                 <el-button type="success" class="fileinput-button" >
                    <span>上传</span>
                    <input type="file" @change="uploadFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
                </el-button>
            </el-col>
        </el-row>
        <table class="table">
            <tbody>
                <tr>
                    <td>  
                        <el-input placeholder="姓名" v-model="searchData.sname" prefix-icon="el-icon-search"
                        @focus="clearAnotherInput('sname')"
                        >
                        </el-input>
                    </td>
                    <td>
                         <el-input  placeholder="联系电话"   v-model="searchData.mobile"     prefix-icon="el-icon-search" @focus="clearAnotherInput('mobile')">
                        </el-input>
                    </td>
                    <td>
                         <el-date-picker
                            v-model="arriveTime"
                            type="date"
                            placeholder="上门时间"
                            
                            value-format="yyyy-MM-dd"
                            suffix-icon="el-icon-date"
                            @focus="clearAnotherInput('arriveTime')"
                            >
                        </el-date-picker>
                    </td>
                    <td>
                         <el-input placeholder="咨询师" v-model="searchData.advisor"  @focus="clearAnotherInput('advisor')"   prefix-icon="el-icon-search"
>
                        </el-input>
                    </td>
                     <td>
                        <el-select v-model="searchData.status" placeholder="状态" @click.native="loadStatus">
                            <el-option v-for="item in social_status "
                            :key="item.kvalue"
                            :label="item.kvalue"
                            :value="item.kkey"
                            suffix-icon="el-icon-search"

                            ></el-option>
                        </el-select>
                    </td>
                    <td>
                        <el-button type="primary" @click="search(searchData,baseURL)"  prefix-icon="el-icon-date">查询</el-button>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table  table-bordered">
            <tbody>
                <tr class="tableHeader">
                    <td>姓名</td>
                    <td>联系电话</td>
                    <td>上门时间</td>
                    <td>咨询师</td>
                    <td>状态</td>
                    <td>判量</td>
                    <td>试学</td>
                    <td>报名</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(item,key) in dataSource" :key="key" class="tableRow">
                    <td>{{item.sname}}</td>
                    <td>{{item.mobile}}</td>
                    <td>{{item.arriveTime}}</td>
                    <td>{{item.advisor}}</td>
                    <td v-status="item.status">{{item.status|showStatus()}}</td>
                    <td>{{item.grade|filterGrade}}</td>
                    <td>{{item.isTry?"是":"否"}}</td>
                    <td>{{item.isPay?"是":"否"}}</td>
                    <td>
                         <el-button
                        size="mini"
                        @click="follow(key, item)"  type="danger" plain>
                        跟踪</el-button>
                    </td>
                </tr>
            </tbody>
           
        </table>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="totalRecord"
                @current-change="currentChange">
            </el-pagination>
    </div>
</template>
<script>

export default {
    data(){
        return {
            searchByTry: false,
            totalPage: 5,
            totalRecord: 0,
            social_status:[],
            isHopeful: true,
            statusStyle: {backgroundColor: 'lightgreen'},
            baseURL: window.baseURL+"/backstage/social/findByPage?token="+this.$token+"&signal=1&",
            searchData: {
                sname: '',
                mobile: '',
                arriveTime: '',
                advisor: '',
                status: '',
            },
        }
    },
    computed: {
        currentUser(){
            var response = JSON.parse(localStorage.getItem("responseData"));
            return response.account.realName;
        },
        arriveTime: {
            get:function(){
                return this.searchData.arriveTime;
            },
            set:function(newValue){
                this.searchData.arriveTime = newValue;
            }
        }
    },
    methods: {
        uploadFile(event){
            var e = event || window.event;
            let file = e.target.files[0];  
            let param = new FormData(); //创建form对象  
            param.append('file',file);//通过append向form对象添加数据  
            param.append('token',this.$token);
            let config = {  
                headers:{'Content-Type':'multipart/form-data'}  
            }; //添加请求头  
            var action = ()=>{
                this.$http.post(window.baseURL+'/backstage/social/upload',param,config)  
                .then(response=>{  
                    if(response.data.success){
                        this.$message({
                            message: '文件上传成功',
                            type: 'success'
                        });
                        e.target.value = ''
                        this.loadData(1);
                    }else{
                        // alert("上传文件失败");
                        this.$message.error('文件上传失败');
                    }
                })  
            }
            this.operatorConfirm(action,'上传');
            
        },
       
        pushToAddNewVisitor(){
            this.$router.push({name:'AddNewVistor'});
        },
        currentChange(value){
            this.loadData(value);
        },
        loadStatus(){
            var sourceURL = window.baseURL + "/backstage/config/findConfigs?ktype=social_status&token=" +this.$token;
            this.$http.get(sourceURL)
            .then(response => {
                this['social_status'] = response.data.data;
            })
            .catch(error => {
            });
        },
        loadData(pageNo){
            var socialURL = window.baseURL+"/backstage/social/findByPage?token="+this.$token+"&pageSize=10&pageNum="+pageNo+"&signal=1";
            this.$http.get(socialURL)
            .then((response)=>{
                this.dataSource = response.data.data.list.results;
                this.totalPage = response.data.data.list.totalPage;
                this.totalRecord = response.data.data.list.totalRecord;
            })
            .catch((error)=>{
            })
        },
        follow(index,visitor){
            localStorage.setItem("currentVisitor",JSON.stringify(visitor));
            this.$router.push({name:'FollowVisitor',params: {currentVisitor: visitor}})
        },
        downLoadTemplate(){
    　　    var downloadElement = document.createElement('a');
        　　downloadElement.href = window.baseURL+"/backstage/social/download?token=de550761bf4a42bd8e77575a481b577d_fc4ab0a13b4f4dc489723c5e902d3253";
        　　document.body.appendChild(downloadElement);
        　　downloadElement.click(); //点击下载
        　　document.body.removeChild(downloadElement); //下载完成移除元素
　          window.URL.revokeObjectURL(href); //释放掉blob对象
        },
    },
    filters: {
        showStatus(value,isHopeful){
            var status = ["2天之内关单","1周内关单","长期跟单","无效量"];
            // var colors = ['lightgreen','LightGoldenrodYellow','Turquoise','WhiteSmoke'];
            // statusStyle.backgroundColor = colors[value-1];
            return status[value-1];
        },
        filterGrade(value){
            var arr = ['A','B','C','D'];
            return arr[value];
        }
    },
    updated(){
    },
    created(){
        this.loadData(1);
    },
    beforeRouteEnter(to,from,next){
        if(to.name === "name"){
            this.loadData(1);
        }
        next();
    },
}
</script>
<style lang="scss" scoped>
    #SocialVistior{
        width: 100%;
        height: 100%;
        padding: 50px;
        position: absolute;
        td {
            text-align: center;
            vertical-align: middle;
        }
        .fileinput-button {
            position: relative;
            display: inline-block;
            overflow: hidden;
        }

        .fileinput-button input{
            position:absolute;
            right: 0px;
            top: 0px;
            opacity: 0;
            -ms-filter: 'alpha(opacity=0)';
            font-size: 200px;
        }
    }
    .hopeful {
        background-color: lightgreen;
    }
    .unHopefule {
        background: lightgrey;
    }

</style>

